<template>
<div class="shopCar-container">
    <!-- 商品列表区域 -->
    <div class="goodsinfo">
        <div class="mui-card" v-for="(item,i) in shopCarList" :key="item.id">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <mt-switch 
                        @change="selectedChange(item.id,$store.getters.getGoodsSelected[item.id])"
                        v-model="$store.getters.getGoodsSelected[item.id]"></mt-switch>
                    <img :src="item.url">
                    <div class="info">
                        <h1>{{ item.title }}</h1>
                        <p>
                            <span class="price">{{ item.sell_price }}</span>
                            <!-- 根据id 来获得对象中对应的 number -->
                            <numBox :initNumber="$store.getters.getGoodsNumber[item.id]" :goodsId="item.id"></numBox>
                            <a href="#" @click.prevent="del(item.id,i)">删除</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 结算区域 -->
    <div class="count">
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner account">
                    <div class="left">
                        <p>总计(不含运费)</p>
                        <p>已勾选商品 <span class="red">{{ $store.getters.getGoodsNumberAndSum.number }}</span> 件，总价 ￥<span class="red">{{ $store.getters.getGoodsNumberAndSum.sum }}</span></p>
                    </div>
                    <mt-button type="danger">去结算</mt-button>
                </div>   
            </div>
        </div>
        <p>{{ $store.getters.getGoodsSelected }}</p>
    </div>
</div>
</template>    
<script>
import numBox from "../subcomponents/shopCar_numberBox.vue"
export default{
    data(){
        return {
            shopCarList:[]
        }
    },
    created(){
        this.getShopCarList()
    },
    methods:{
        getShopCarList(){
            this.$http.get("http://127.0.0.1/vue.js/项目练习/api/json/shopCarList.json").then(result=>{
                this.shopCarList = result.body.message;
                console.log(result.body.message);
            })
        },
        del(id,index){
            // 删除id 对应的商品 state中的car 以及当前组件中的 shopCarList
            this.shopCarList.splice(index,1);
            this.$store.commit('delFromCar',id);
        },
        // id --> store.car中的数据  val --> 当前组件的状态
        selectedChange(id,val){
            this.$store.commit('updateGoodsSelected',{id:id,selected:val})
        }
    },
    components:{
        numBox
    }
}
</script>
<style lang="less" scoped>
    .shopCar-container{
        background-color: #eee;
        overflow: hidden;
        .goodsinfo{
            .mui-card-content-inner{
                display: flex;
                justify-content: space-between;
                // flex 布局 每个盒子 y轴居中
                align-items:center;
                img{
                    width: 60px;
                    height: 60px;
                }
                h1{
                    font-size: 14px;
                }
                .info{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .price{
                        color: red;
                        font-weight: bold;
                    }
                    a{
                        display: block;
                    }
                }
            }
            
        }
        .count{
            .account{
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .red{
                color: red;
                font-weight: bold;
                font-size:16px;
            }
        }
    }
</style> 